/**
 * Created by 2019/3/18/018
 * Author: Admin
 */
import React, {Component} from 'react';
import {
    Form, Icon, Input, Button, Checkbox, message
} from 'antd';
import './index.css'
import {Redirect} from 'react-router-dom'
import {login} from '../../api/api'
import md5 from './md5'

 class NormalLoginForm extends Component {
     constructor(props) {  //类构造函数
         super(props);
         this.state = {
             loginState: false,
             username:'',
             password: ''
         };
     }
    handleSubmit = (e) => {
        // e.preventDefault(); //阻止页面重新渲染
        let userInfo = this.props.form.getFieldsValue();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // console.log('Received values of form: ', values);
               // login(values.userName,values.password).then(res=> {
               //     if (res.data.code !== 0) {
               //         message.error('登陆失败');
               //     } else {
               //         message.success('登陆成功');
               //         sessionStorage.userId = res.data.admin.id
               //         sessionStorage.username = res.data.admin.username
               //         sessionStorage.account = res.data.admin.account
               //         sessionStorage.status = res.data.admin.status
               //         sessionStorage.token = res.data.admin.token
               //         sessionStorage.level = res.data.admin.type
               //         sessionStorage.type = res.data.admin.logintype
               //         // this.$router.push({path:'/home'})
               //        this.props.history.push('/menu/home',{current:"home"})
               //     }
               //
               // })
            }
        });
        this.setState({
            loginState:true
        })
    }
    nameChange (e){
        console.log(e.target.value)
        // this.setState({//将使用 this.setState() 来更新组件局部状态：
        //     username: e.target.value
        // })
    }
     pwdChange(e){
         console.log(e.target.value)

     }
    render() {
        const { getFieldDecorator } = this.props.form;
        const state = this.state
        if(state.loginState){
            return <Redirect to="/menu/home"/>
        }
        return (
            <div className="login">
            <Form onSubmit={this.handleSubmit} className="login-form">
                <Form.Item>
                    {getFieldDecorator('userName', { //userName实际上就是你获取整个表单数据对象之后，此输入框的名字
                        initialValue:'',//这是用来初始化表单数据的
                        rules: [//这是用来校验表单数据的，具体用法请看文档
                            { required: true, message: 'Please input your username!' },
                            {
                                min:5,max:11,
                                message:'长度不在范围内'
                            },
                            {
                                pattern:new RegExp('^\\w+$','g'),
                                message:'用户名必须为字母或者数字'
                            }
                            ],
                    })(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                        // onChange={this.nameChange} value={state.username}
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('password', {
                        initialValue:'',//这是用来初始化表单数据的
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                        // onChange={this.pwdChange}  value={state.password}
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>Remember me</Checkbox>
                    )}
                    <a className="login-form-forgot" href="">Forgot password</a>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
                    </Button>
                    Or <a href="">register now!</a>
                </Form.Item>
            </Form>
            </div>
        );
    }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);

export default WrappedNormalLoginForm;